<!--
 * @Author       : wfl
 * @LastEditors  : wfl
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-02-27 17:47:51
 * @LastEditTime : 2023-02-27 18:04:34
-->
<route lang="yaml">
meta:
  enabled: false
  </route>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
import useSettingsStore from '@g/store/modules/settings'
import useTabbarStore from '@g/store/modules/tabbar'
const route = useRoute()
const router = useRouter()
const settingsStore = useSettingsStore()
const tabbarStore = useTabbarStore()
const data = ref({
  inter: NaN,
  countdown: 5
})

const { t } = useI18n()

onBeforeRouteLeave(() => {
  data.value.inter && window.clearInterval(data.value.inter)
})
onMounted(() => {
  if (settingsStore.settings.tabbar.enable)
    tabbarStore.remove(route.meta.activeMenu || route.fullPath)

  data.value.inter = window.setInterval(() => {
    data.value.countdown--
    if (data.value.countdown === 0) {
      data.value.inter && window.clearInterval(data.value.inter)
      goBack()
    }
  }, 1000)
})
function goBack() {
  router.push('/')
}
</script>

<template>
  <div class="notallowed">
    <IkSvgIcon name="403" class="icon" size="420" />
    <div class="content">
      <h1>403</h1>
      <div class="desc">
        {{ t('code.403') }}
      </div>
      <el-button type="primary" @click="goBack">
        {{ data.countdown }} {{ t('validate.afterSecond') }}，{{ t('action.back') }}{{ t('app.home') }}
      </el-button>
    </div>
  </div>
</template>

  <style lang="scss" scoped>
  .notallowed {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 700px;

    @include position-center(xy);

    .icon {
      width: 400px;
      height: 400px;
    }

    .content {
      h1 {
        margin: 0;
        font-size: 72px;
        color: var(--el-text-color-primary);
      }

      .desc {
        margin: 20px 0 30px;
        font-size: 20px;
        color: var(--el-text-color-secondary);
      }
    }
  }
  </style>
